
<template>
    <div class="content" ref="root">
        <div class="left">
            <image-list />
        </div>
        <div class="middle">
            <header>
                <top-bar v-model:text="textVal" @onChange="handleChange" />
            </header>
            <div class="drawer-inner">
                <aside>
                    <side-bar @onChange="handleChange" />
                </aside>
                <main @click.meta="handleChange('deleteActiveFeature')">
                    <div class="draw-board">
                        <div :id="rootId"></div>
                    </div>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup>
    import ImageList from '@/components/ImageList/index.vue';
    import TopBar from '@/components/TopBar/index.vue';
    import SideBar from '@/components/Sidebar/index.vue';
    import useLabel from '@/hooks/useLabel';

    import {ref, computed, watch} from '@vue/runtime-core';
    import {useStore} from 'vuex';
    import {MODE} from 'wklabel/constants';
    import {useFullscreen} from '@vueuse/core';

    const {state} = useStore();

    const rootId = 'g-drawer';
    const params = computed(() => ({rootId, image: state.currImage}));
    const {
        download,
        getAllData,
        getRle,
        reset,
        zoomIn,
        zoomOut,
        updateText,
        setMode,
        deleteActiveFeature
    } = useLabel(params);
    const root = ref();
    const {enter} = useFullscreen(root.value);
    const textVal = ref();

    const dealPool = {
        // on zoom out
        zoomOut: zoomOut,
        // on zoom in
        zoomIn: zoomIn,
        // fullscreen
        fullscreen: enter,
        // on clear
        reset,
        // on export
        export: () => {
            const rle = getRle(); // 擦除数据
            const data = getAllData(); // 全部数据
            console.log({rle, data});
        },
        // on download
        download: download,
        // on move
        move: () => setMode(MODE.PAN),
        // point
        point: () => setMode(MODE.POINT),
        // line
        line: () => setMode(MODE.LINE),
        // rect
        rect: () => setMode(MODE.RECT),
        // polyon
        polyon: () => setMode(MODE.POLYGON),
        // polyonline
        polyonline: () => setMode(MODE.POLYLINE),
        // circle
        circle: () => setMode(MODE.CIRCLE),
        // mark
        mark: () => setMode(MODE.MARKER),
        // draw
        draw: () => setMode(MODE.DRAWMASK),
        // clear
        clear: () => setMode(MODE.CLEARMASK),
        // update text
        updateText: params => updateText(params.text),
        // delete active feature
        deleteActiveFeature
    };

    const handleChange = (type, params) => {
        dealPool[type](params);
    };

    watch(textVal, text => {
        handleChange('updateText', {text});
    });

</script>

<style lang="scss" scoped>
    @import '@/common/css/global.scss';
</style>
